<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生日概率计算</title>
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f4f4f9;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0;
            line-height: 1.8;
        }

        h1 {
            color: #333;
            margin: 20px 0;
            font-size: 28px;
            position: fixed;
            top: 0;
            background-color: #f4f4f9;
            width: 100%;
            text-align: center;
            padding: 10px 0;
            z-index: 1;
        }

        #content {
            margin-top: 80px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #input-container {
            display: flex;
            align-items: center;
            margin-bottom: 20px;
            gap: 10px;
            margin-top: 60px;
        }

        #input-container label {
            font-size: 20px;
        }

        #numStudents {
            padding: 6px;
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 40px;
            text-align: center;
            font-size: 18px;
        }

        #input-container button {
            padding: 6px 10px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 18px;
        }

        #result {
            font-size: 24px;
            font-weight: 600;
            color: #333;
            margin-bottom: 15px;
            text-align: center;
        }

        #n-result {
            color: #007BFF;
        }

        #x-result {
            color: #ff4d4d;
        }

        #show-principle {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 10px;
        }

        #principle-details {
            display: none;
            background-color: white;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin-top: 10px;
            font-size: 20px;
            text-align: center;
            line-height: 1.6;
        }

        #principle-details span {
            display: block;
        }

        #principle-details math,
        #principle-details span:has(span) {
            color: #FF6600;
        }
    </style>
</head>

<body>
    <h1>生日概率计算</h1>
    <div id="content">
        <div id="input-container">
            <label for="numStudents">人数</label>
            <button id="decreaseButton">-</button>
            <input type="number" id="numStudents" value="2" min="1">
            <button id="increaseButton">+</button>
        </div>
        <div id="result">
            <span>当有<span id="n-result"></span>个同学时，有 <span id="x-result"></span> 的概率会出现在同一天生日。</span>
        </div>
        <button id="show-principle">计算原理</button>
        <div id="principle-details">
            <span id="principle-formula-intro"></span>
            <span id="principle-formula"></span>
            <span id="principle-formula-result"></span>
            <span id="principle-same-day-probability"></span>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const numStudentsInput = document.getElementById('numStudents');
            const nResultSpan = document.getElementById('n-result');
            const xResultSpan = document.getElementById('x-result');
            const showPrincipleButton = document.getElementById('show-principle');
            const principleDetails = document.getElementById('principle-details');
            const principleFormulaIntro = document.getElementById('principle-formula-intro');
            const principleFormulaSpan = document.getElementById('principle-formula');
            const principleFormulaResultSpan = document.getElementById('principle-formula-result');
            const principleSameDayProbabilitySpan = document.getElementById('principle-same-day-probability');

            function calculateProbability(n) {
                let probability = 1;
                for (let i = 0; i < n; i++) {
                    probability *= (365 - i) / 365;
                }
                return probability;
            }

            function generateMathMLFormula(n) {
                let mathML = '<math xmlns="http://www.w3.org/1998/Math/MathML">';
                for (let i = 0; i < n; i++) {
                    if (i === 0) {
                        mathML += '<mn>1</mn>';
                    } else {
                        mathML += '<mo>&times;</mo>';
                        mathML += '<mfrac>';
                        mathML += `<mn>${365 - i}</mn>`;
                        mathML += '<mn>365</mn>';
                        mathML += '</mfrac>';
                    }
                }
                mathML += '</math>';
                return mathML;
            }

            function updateResult() {
                const n = parseInt(numStudentsInput.value);
                const probability = calculateProbability(n);
                const sameDayProb = (1 - probability) * 100;
                nResultSpan.textContent = n;
                xResultSpan.textContent = `${sameDayProb.toFixed(2)}%`;

                principleFormulaIntro.textContent = `${n}个人不同一天生日概率的算法`;
                const formula = generateMathMLFormula(n);
                principleFormulaSpan.innerHTML = formula;
                principleFormulaResultSpan.textContent = ` = ${probability.toFixed(4)}`;
                principleSameDayProbabilitySpan.textContent = `有同一天生日的概率是 1 - ${probability.toFixed(4)} = ${sameDayProb.toFixed(2)}%`;
            }

            numStudentsInput.addEventListener('input', updateResult);
            document.getElementById('decreaseButton').addEventListener('click', () => {
                if (numStudentsInput.value > 1) {
                    numStudentsInput.value = parseInt(numStudentsInput.value) - 1;
                    updateResult();
                }
            });
            document.getElementById('increaseButton').addEventListener('click', () => {
                numStudentsInput.value = parseInt(numStudentsInput.value) + 1;
                updateResult();
            });

            showPrincipleButton.addEventListener('click', () => {
                if (principleDetails.style.display === 'none') {
                    principleDetails.style.display = 'block';
                } else {
                    principleDetails.style.display = 'none';
                }
            });

            updateResult();
        });
    </script>
</body>

</html>    